[자바스크립트] textContent 그리고 innerText 차이점 알아보기

자바스크립트에서 엘리먼트 및 노드에 텍스트를 추가하거나 값을 가져올 수 있는 방법 중 하나인 textContent에 대하여 알아봅니다. 여기서 방법 중 하나라고 얘기한 이유는 잘 알려진 innerText가 존재하기 때문이죠.

# 자바스크립트 textContent 프로퍼티 알아보기

자바스크립트 프로퍼티인 textContent는 텍스트를 추가할 수 있는 매우 간단한 프로퍼티입니다. 사용방법은 아래와 같습니다.

element.textContent = '내용'


일반적으로 텍스트를 엘리먼트에 추가할 경우 innerText가 많이 쓰입니다. 가장 많이 알려져 있기도 하고  innerHTML과 비슷하기 때문에 외우기도 더 쉽죠. 이런 이유로 textContent가 덜 사용되긴 하지만 이 둘의 차이점이 존재합니다. 그럼 공통점과 차이점을 간단히 알아보면 무엇일까요?


[공통점 1] 둘 다 텍스트노드를 추가함
이 둘 모두 텍스트를 추가한다는 공통점이 있습니다. 결과 역시 동일합니다.

[공통점 2] 해당 엘리먼트의 텍스트 값을 반환함
즉 둘 다 어떤 텍스트를 가지고 있는지 알 수 있습니다.


다음으로 차이점은 무엇일까요?
[차이점 1]
일단 textContent가 더 먼저 만들어졌으며 더 빨리 사용되었습니다. 그런 이유로 브라우저 호환성도 좀 더 높습니다. 또한 큰 차이는 아니지만 더 가볍다고 알려져 있습니다.

[차이점 2]
그 다음으로 값을 가져올 때 다수의 스페이스가 존재하는 경우 하나로 가져오느냐 아니면 모두 가져오느냐의 차이가 있습니다.

innerText는 불필요한 공백을 제거하고 텍스트로 반환하지만 textContent는 모든 텍스트를 그대로 가져오는 차이점이 있습니다. 예제를 만들어 알아보면 만약 아래와 같은 태그가 있다면...

각각 프로퍼티를 사용해 텍스트를 가져오면 그 결과는 많이 달라질 수 있죠.

@ innerText를 사용한 경우

@ textContent를 사용한 경우

이 둘의 차이점을 위와 같이 여러개의 공백을 가진 경우에 달라지게 됩니다.

! 알아둘 것

실제로 여러 브라우저에서 테스트를 해보면 그 결과가 많이 달라집니다. IE의 경우는 위와 같이 나타나지만 현재의 크롬 버전에서는 둘 다 동일하게 결과가 나타나니 알아두세요.